<template>
  <div class="detail overflow-hidden">
    <el-tabs @tab-change="handleChange" v-model="current">
        <el-tab-pane label="用户明细" name="用户明细">
            <user-data ref="userDataRef" v-if="current == '用户明细'" :searchForm="searchForm"></user-data>
        </el-tab-pane>
        <el-tab-pane label="门店统计" name="门店统计">
            <store-data ref="storeDataRef" v-if="current == '门店统计'" :searchForm="searchForm"></store-data>
        </el-tab-pane>
    </el-tabs>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import UserData from './UserData.vue'
import StoreData from './StoreData.vue'

const userDataRef = ref()
const storeDataRef = ref()
const current = ref('用户明细')
const searchForm = ref<{id: IActivityItem['id']}>({
    id: 0
})
function init (row: IActivityItem) {
    searchForm.value = {
        id: row.id
    }

    nextTick(() => {
        if (current.value == '用户明细') {
            userDataRef.value?.reload()
        } else if (current.value == '门店统计') {
            storeDataRef.value?.reload()
        }
    })
}

function handleChange () {
    nextTick(() => {
        if (current.value == '用户明细') {
            userDataRef.value?.reload()
        } else if (current.value == '门店统计') {
            storeDataRef.value?.reload()
        }
    })
}

defineExpose({
    init
})

</script>
